<template>
    <div class="container-fluid login">


        <div class="container" id="login_form">
            <div class="avatar_box">
                <img src="../assets/Game_login.png"/>
            </div>

            <form class="container"  style="padding-top: 18%">

                <div class="mb-3 mt-4 row">
                    <span class="col-form-label-lg col-sm-3">用户名：</span>
                    <input v-model="username" ref="username"  class="form-control col-sm-6" id="username">
                </div>


                <div class="mb-3 row">
                    <label for="pwd" class="col-form-label-lg col-sm-3">密码：</label>
                    <input v-model="password" ref="password" type="password" class="form-control col-sm-6" id="pwd">
                </div>

                <div class="btn-group-lg">
                    <!--button与submit的区别，submit是提交表单的数据到服务器，而button如果没有添加onclick事件的监听，点击时没有任何反应。-->
                    <button type="button" class="offset-sm-1 btn" @click="form_register()" style="background-color: #4c44a5;color:white">注册</button>
                    &emsp;
                    <button type="button" class="offset-sm-0 btn" @click="to_login()" style="background-color: white;color: black">已有账号登录</button>
                </div>
            </form>
        </div>

    </div>
</template>

<script>
    import Common from '../components/common'
    import * as PIXI from 'pixi.js'
    const axios=require('axios')
    export default {
        name: "login",
        data() {
            return {
                username: '',
                mytext:'',
                password:'',
                list:[{text:"游客模式"},{text:"随时畅玩"}],
                height: 0, // 轮播区域的高度
                item:"ds",
                yPos: 0,
            }
        },

        methods:{

            form_register(){
                let that=this;
                let data=new URLSearchParams()
                data.append('username',this.username)
                data.append('stupwd',this.password)

                axios.post('/user/register',data).then(res =>{
                    console.log(res.data)
                    if(res.data=="Sucess"){
                        this.$cookies.set("username",this.username,"2d");
                        this.$router.push("/home");
                    }
                    else{
                        eval(res.data)
                    }
                })
            },

            to_login(){
                this.$router.push("/login");
            },

        }
    }
</script>

<style lang="scss" scoped>
    .login{
        position: absolute;
        height: 900px;
        background: #332d77;
    }

    #lunbo{
        margin-left: 95%;
        width: 100px;
        height: 20px;
        overflow: hidden;
    }
    #login_form{
        position: absolute;
        height: 40%;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 8px;
        animation: down 1s 0.2s ease both;
    }

    @media screen and (max-width: 1000px) {
        #login_form{
            top: 50%;
            left: 50%;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            animation: down 1s 0.2s ease both;
        }
    }

    @media screen and (min-width: 1000px) {
        #username {
            width: 24vw;
            height: 5vh;
        }
        #pwd{
            width: 24vw;
            height: 5vh;
            padding-left: 1px;
        }
        #login_form{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40vw;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            animation: down 1s 0.2s ease both;
        }

    }

    .avatar_box {
        border: 1px solid #6fade8;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 12px #41e2ff;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        /* 添加动画 */
        animation: pulse 2.5s linear infinite;
        user-select: none;
    }
    .avatar_box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    @keyframes pulse {
        0% {
            width: 100px;
            height: 100px;
        }
        60% {
            width: 120px;
            height: 120px;
            opacity: 0.4;
        }

        100% {
            width: 140px;
            height: 140px;
            opacity: 0;
        }
    }

    @keyframes down {
        0% {
            opacity: 0;
            transform: translate(-50%, -150%);
        }
        60% {
            opacity: 1;
            transform: translate(-50%, -40%);
        }
        100% {
            transform: translate(-50%, -50%);
        }
    }

</style>